@keyframes dog {
  0% {
    width: .83rem;
    height: .92rem;
    background: url(../images/dog1.png) no-repeat;
    background-size: contain;
  }
  9% {
    width: .83rem;
    height: .92rem;
    background: url(../images/dog2.png) no-repeat;
    background-size: contain;
  }
  18% {
    width: .83rem;
    height: .92rem;
    background: url(../images/dog3.png) no-repeat;
    background-size: contain;
  }
  27% {
    width: .83rem;
    height: .92rem;
    background: url(../images/dog4.png) no-repeat;
    background-size: contain;
  }
  36% {
    width: .83rem;
    height: .92rem;
    background: url(../images/dog5.png) no-repeat;
    background-size: contain;
  }
  45% {
    width: .83rem;
    height: .92rem;
    background: url(../images/dog6.png) no-repeat;
    background-size: contain;
  }
  54% {
    width: .83rem;
    height: .92rem;
    background: url(../images/dog7.png) no-repeat;
    background-size: contain;
  }
  63% {
    width: .83rem;
    height: .92rem;
    background: url(../images/dog8.png) no-repeat;
    background-size: contain;
  }
  72% {
    width: .83rem;
    height: .92rem;
    background: url(../images/dog9.png) no-repeat;
    background-size: contain;
  }
  81% {
    width: .83rem;
    height: .92rem;
    background: url(../images/dog10.png) no-repeat;
    background-size: contain;
  }
  90% {
    width: .83rem;
    height: .92rem;
    background: url(../images/dog11.png) no-repeat;
    background-size: contain;
  }
  100% {
    width: .83rem;
    height: .92rem;
    background: url(../images/dog12.png) no-repeat;
    background-size: contain;
  }
}

.container {
  width: 6.4rem;
  height: 11.36rem;
  background: url(../images/bg-result.png) no-repeat;
  background-size: contain;
  position: relative;
}

.container .logo {
  width: 1.03rem;
  height: 0.38rem;
  background: url(../images/logo.png) no-repeat;
  background-size: contain;
  position: absolute;
  top: 0.45rem;
  right: auto;
  bottom: auto;
  left: 0.45rem;
}

.container .content {
  width: 5.34rem;
  height: 8.46rem;
  background: url(../images/shape-result.png) no-repeat;
  background-size: contain;
  position: absolute;
  top: 1.5rem;
  right: auto;
  bottom: auto;
  left: auto;
  position: absolute;
  left: 50%;
  transform: translate(-50%);
}

.container .content .title {
  width: 100%;
  text-align: center;
  font-size: .5185rem;
  font-weight: bold;
  color: #f6ff00;
  text-shadow: 0.02rem 0 0 #000, -0.02rem 0 0 #000, 0 0.02rem 0 #000, 0 -0.02rem 0 #000;
  margin-top: .8rem;
}

.container .content .result {
  font-size: .375rem;
  color: #fff;
  text-align: center;
  margin-top: .3rem;
  text-shadow: 0.01rem 0.01rem 0.07rem #000;
}

.container .content .result p {
  line-height: .7rem;
}

.container .content .result span {
  color: #36ff00;
}

.container .content .share-button {
  width: 2rem;
  height: 0.71rem;
  background: url(../images/button-result.png) no-repeat;
  background-size: contain;
  position: absolute;
  top: 7rem;
  right: auto;
  bottom: auto;
  left: 2.7rem;
}

.container .content .share-button a {
  display: block;
  width: 2rem;
  height: 0.71rem;
}

.container .content .person {
  width: 2.6rem;
  height: 3.33rem;
  background: url(../images/person-result.png) no-repeat;
  background-size: contain;
  position: absolute;
  top: 5.95rem;
  right: auto;
  bottom: auto;
  left: 0.25rem;
}
